<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>忘记密码 - 名片维护系统</title>
    <link rel="stylesheet" th:href="@{/css/forget-password.css}">
</head>
<body>
    <div class="container">
        <div class="form-container">
            <h2 class="form-title">找回密码</h2>
            <div class="message error" id="error-message" style="display: none;"></div>
            <div class="message success" id="success-message" style="display: none;"></div>
            
            <form id="forget-password-form">
                <div class="form-group">
                    <label class="form-label" for="email">邮箱</label>
                    <input class="form-input" type="email" id="email" name="email" required>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="captcha">验证码</label>
                    <div class="captcha-container">
                        <input class="form-input captcha-input" type="text" id="captcha" name="captcha" required>
                        <img class="captcha-image" id="captcha-image" src="/user/captcha" alt="验证码" onclick="refreshCaptcha()">
                    </div>
                </div>
                
                <button class="form-button" type="submit">发送临时密码</button>
            </form>
            
            <a class="form-link" href="/user/login">返回登录</a>
        </div>
    </div>
    
    <script>
        // 刷新验证码
        function refreshCaptcha() {
            document.getElementById('captcha-image').src = '/user/captcha?' + new Date().getTime();
        }
        
        // 表单提交
        document.getElementById('forget-password-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const email = document.getElementById('email').value;
            const captcha = document.getElementById('captcha').value;
            
            // 表单验证
            if (!email || !captcha) {
                showError('请填写完整信息');
                return;
            }
            
            // 发送请求
            fetch('/user/forget-password', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: 'email=' + encodeURIComponent(email) + '&captcha=' + encodeURIComponent(captcha)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showSuccess(data.message);
                    document.getElementById('forget-password-form').reset();
                    // 5秒后跳转到登录页
                    setTimeout(function() {
                        window.location.href = '/user/login';
                    }, 5000);
                } else {
                    showError(data.message);
                    refreshCaptcha();
                }
            })
            .catch(error => {
                showError('服务器错误，请稍后再试');
                console.error('Error:', error);
            });
        });
        
        // 显示错误信息
        function showError(message) {
            const errorElement = document.getElementById('error-message');
            const successElement = document.getElementById('success-message');
            
            errorElement.textContent = message;
            errorElement.style.display = 'block';
            successElement.style.display = 'none';
        }
        
        // 显示成功信息
        function showSuccess(message) {
            const errorElement = document.getElementById('error-message');
            const successElement = document.getElementById('success-message');
            
            successElement.textContent = message;
            successElement.style.display = 'block';
            errorElement.style.display = 'none';
        }
    </script>
</body>
</html>